<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <script type="text/javascript">

        $(function () {
            pageList(1, 4);

            $("#searchBtn").click(function (){
                pageList(1,4);
            })

        })

        function showContent(eid) {
            window.location.href="workbench/teacher/makeTest/getConcreteExamination.do?eid="+eid
        }


        function analyse(eid) {
            window.location.href="toView/workbench/teacher/analyse/detail?eid="+eid
        }

        function pageList(pageNo, pageSize) {
            var eName=$.trim($("#search_eName").val());
            var teacherId=$.trim($("#search_teacherId").val());
            var startTime=$.trim($("#search_startTime").val());
            var endTime=$.trim($("#search_endTime").val());

            $.ajax({
                url: "workbench/teacher/makeTest/getExaminationList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "eName":eName ,
                    "teacherId":teacherId,
                    "startTime":startTime,
                    "endTime":endTime,
                    "published":'1'
                },
                dataType: "json",
                type: "get",
                success:function (data){
                    var html="";
                    $.each(data.dataList,function (i,n){
                        var published=null;
                        if(n.published=="0"){
                            published="未发布"
                        }else {
                            published="已发布"
                        }
                        html+='  <tr class="active">',
                            html+='  <td><a style="text-decoration: none; cursor: pointer;" onclick="showContent(\''+n.eid+'\')">'+n.eName+'</a></td>',
                            html+='  <td>'+n.teacherId+'</td>',
                            html+='  <td>'+n.startTime+'</td>',
                            html+='  <td>'+n.endTime+'</td>',
                            html+='  <td id='+'e'+n.eid+'>'+published+'</td>',
                            html+='<td><span class="glyphicon glyphicon-stats"></span> <a style="text-decoration: none; cursor: pointer;" onclick="analyse(\''+n.eid+'\')">试卷成绩分析</a></td>',
                            html+='  </tr>'
                    })
                    $("#examinationBody").html(html);
                    var totalPages=Math.ceil(data.total/pageSize);
                    $("#examinationPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 5, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        /*该回调函数是在点击分页组件时候触发的*/
                        onChangePage : function(event, data){
                            pageList(data.currentPage , data.rowsPerPage);
                        }
                    });

                }
            })
        }


    </script>
</head>
<body>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>已发布试卷列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">试卷名称</div>
                        <input id="search_eName" class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">创建者</div>
                        <input id="search_teacherId" class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">创建日期</div>
                        <input class="form-control time" type="text" id="search_startTime" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">截止日期</div>
                        <input class="form-control time" type="text" id="search_endTime" />
                    </div>
                </div>

                <button id="searchBtn" type="button" class="btn btn-default">查询</button>

            </form>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td>试卷名称</td>
                    <td>创建者</td>
                    <td>开始时间</td>
                    <td>截止日期</td>
                    <td>发布状态</td>
                    <td>&nbsp;&nbsp;&nbsp;操作</td>
                </tr>
                </thead>
                <tbody id="examinationBody">

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">

            <div id="examinationPage"></div>

        </div>

    </div>

</div>
</body>
</html>